<template>
  <div class="">
    <!-- <el-button type="primary" size="default" @click="showdia = true">
      添加大屏
    </el-button> -->

    <div
      class="adddiv divcontainer"
      :style="{
        flex: hangjson.flex,
        flexDirection: hangjson.flexDirection,
      }"
    >
      <div
        class="oprationdiv"
        :style="{
          flexDirection: hangjson.flexDirection == 'column' ? 'row' : 'column',
        }"
      >
        <i
          class="el-icon-plus icondiv"
          slot="reference"
          @click="
            itemjson = hangjson.toptop;
            addtype = 'hang';
            showdia1 = true;
          "
        ></i>

        <i
          class="el-icon-edit icondiv"
          slot="reference"
          @click="
            itemjson = blockitem;
            showdia = true;
          "
        ></i>

        <i
          class="el-icon-delete icondiv"
          slot="reference"
          @click="delclick(hangjson.toptop)"
        ></i>
      </div>

      <!-- <div class=""> -->
      <div
        class="hang adddiv"
        v-for="(hangitem, hangitemindex) in hangjson.toptop"
        :style="{
          flex: hangitem.flex,
          flexDirection: hangitem.flexDirection,
        }"
      >
        <div
          class="oprationdiv"
          :style="{
            flexDirection:
              hangitem.flexDirection == 'column' ? 'row' : 'column',
          }"
        >
          <i
            class="el-icon-plus icondiv"
            slot="reference"
            @click="
              itemjson = hangitem.top;
              addtype = 'top';
              showdia1 = true;
            "
          ></i>

          <i
            class="el-icon-edit icondiv"
            slot="reference"
            @click="
              itemjson = hangitem;
              showdia = true;
            "
          ></i>

          <i
            class="el-icon-delete icondiv"
            slot="reference"
            @click="delclick(hangjson.toptop, hangitemindex)"
          ></i>
        </div>

        <div
          class="top adddiv"
          v-for="(topitem, topitemindex) in hangitem.top"
          :style="{
            flex: topitem.flex,
            flexDirection: topitem.flexDirection,
          }"
        >
          <div
            class="oprationdiv"
            :style="{
              flexDirection:
                topitem.flexDirection == 'column' ? 'row' : 'column',
            }"
          >
            <i
              class="el-icon-plus icondiv"
              slot="reference"
              @click="
                itemjson = topitem.middle;
                addtype = 'middle';
                showdia1 = true;
              "
            ></i>

            <i
              class="el-icon-edit icondiv"
              slot="reference"
              @click="
                itemjson = topitem;
                showdia = true;
              "
            ></i>

            <i
              class="el-icon-delete icondiv"
              slot="reference"
              @click="delclick(hangitem.top, topitemindex)"
            ></i>
          </div>

          <div
            class="middle adddiv"
            v-for="(middleitem, middleitemindex) in topitem.middle"
            :style="{
              flex: middleitem.flex,
              flexDirection: middleitem.flexDirection,
            }"
          >
            <div
              class="oprationdiv"
              :style="{
                flexDirection:
                  middleitem.flexDirection == 'column' ? 'row' : 'column',
              }"
            >
              <i
                class="el-icon-plus icondiv"
                slot="reference"
                @click="
                  itemjson = middleitem.block;
                  addtype = 'block';
                  showdia1 = true;
                "
              ></i>

              <i
                class="el-icon-edit icondiv"
                slot="reference"
                @click="
                  itemjson = middleitem;
                  showdia = true;
                "
              ></i>

              <i
                class="el-icon-delete icondiv"
                slot="reference"
                @click="delclick(topitem.middle, middleitemindex)"
              ></i>
            </div>

            <div
              class="block adddiv"
              v-for="(blockitem, blockitemindex) in middleitem.block"
              :style="{
                flex: blockitem.flex,
                flexDirection: 'column',
              }"
            >
              <div class="oprationdiv" :style="{
                flexDirection: 'row',

              }">
                <i
                  class="el-icon-edit icondiv"
                  slot="reference"
                  @click="
                    itemjson = blockitem;
                    showdia = true;
                  "
                ></i>

                <i
                  class="el-icon-delete icondiv"
                  slot="reference"
                  @click="delclick(middleitem.block, blockitemindex)"
                ></i>
              </div>
              <div style="display: flex;flex-direction: row;justify-content: space-around;">
                <el-tag
                  size="mini"
                  @click="showdia2 = true"
                  style="cursor: pointer"
                  >框</el-tag
                >
                <el-tag
                  size="mini"
                  @click="showdia3 = true"
                  style="cursor: pointer"
                  >组</el-tag
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- </div> -->
    </div>

    <el-dialog
      title="showdia2"
      :visible.sync="showdia2"
      width="55%"
      @close="showdia2 = false"
    >
      <span></span>

      <borders />

      <span slot="footer">
        <el-button @click="showdia2 = false">Cancel</el-button>
        <el-button type="primary" @click="showdia2 = false">OK</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="showdia2"
      :visible.sync="showdia3"
      width="30%"
      @close="showdia3 = false"
    >
      <span></span>

      <span slot="footer">
        <el-button @click="showdia3 = false">Cancel</el-button>
        <el-button type="primary" @click="showdia3 = false">OK</el-button>
      </span>
    </el-dialog>

    <el-dialog title="" :visible.sync="showdia" width="30%" @close="1">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <!-- card body -->
        方向：<el-select v-model="dirvalue" placeholder="请选择">
          <el-option
            v-for="item in diroptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        比例：
        <el-input
          v-model="flexvalinput"
          placeholder="请输入内容"
          style="width: 200px"
        ></el-input>
      </el-card>
      <span slot="footer">
        <el-button @click="showdia = false">Cancel</el-button>
        <el-button type="primary" @click="editclick()">OK</el-button>
      </span>
    </el-dialog>
    <el-dialog title="" :visible.sync="showdia1" width="30%" @close="1">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <!-- card body -->
        方向：<el-select v-model="dirvalue" placeholder="请选择">
          <el-option
            v-for="item in diroptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        比例：
        <el-input
          v-model="flexvalinput"
          placeholder="请输入内容"
          style="width: 200px"
        ></el-input>
      </el-card>
      <span slot="footer">
        <el-button @click="showdia1 = false">Cancel</el-button>
        <el-button type="primary" @click="addclick()">OK</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// import configjson from "./yantai.json";

import borders from './border'

export default {
  components: {borders},
  data() {
    return {
      showdia: false,
      showdia1: false,
      showdia2: false,
      showdia3: false,
      addtype: "",
      diroptions: [
        { label: "一行", value: "row" },
        { label: "一列", value: "column" },
      ],
      dirvalue: "row",
      flexvalinput: 2,
      hangjson: {
        toptop: [
          {
            top: [
              {
                middle: [
                  {
                    block: [
                      { flex: 2, flexDirection: this.dirvalue },
                      { flex: 2, flexDirection: this.dirvalue },
                      { flex: 2, flexDirection: this.dirvalue },
                    ],
                    flex: 2,
                    flexDirection: "row",
                  },
                  {
                    block: [{ flex: 2 }, { flex: 2 }, { flex: 2 }],
                    flex: 2,
                    flexDirection: "column",
                  },
                  {
                    block: [
                      { flex: 2, flexDirection: this.dirvalue },
                      { flex: 2, flexDirection: this.dirvalue },
                      { flex: 2, flexDirection: this.dirvalue },
                    ],
                    flex: 2,
                    flexDirection: "row",
                  },
                ],
                flex: 2,
                flexDirection: "column",
              },
              {
                middle: [
                  {
                    block: [{ flex: 2, flexDirection: this.dirvalue }],
                    flex: 2,
                    flexDirection: this.dirvalue,
                  },
                ],
                flex: 2,
                flexDirection: this.dirvalue,
              },
              {
                middle: [
                  {
                    block: [{ flex: 2, flexDirection: this.dirvalue }],
                    flex: 2,
                    flexDirection: this.dirvalue,
                  },
                ],
                flex: 2,
                flexDirection: this.dirvalue,
              },
            ],
            flex: 2,
            flexDirection: "row",
          },
        ],
        flex: 2,
        flexDirection: "column",
      },
      itemjson: {},
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    clickborder() {},
    clickcomponent() {},
    editclick(itemjson) {
      this.itemjson["flexDirection"] = this.dirvalue;
      this.itemjson["flex"] = this.flexvalinput;
      this.showdia = false;
    },
    delclick(itemjson, index) {
      // itemjson.pop();
      itemjson.splice(index, 1);
    },
    addclick() {
      // addclick(type, itemjson) {
      switch (this.addtype) {
        case "hang":
          this.itemjson.push({
            top: [],
            flex: this.flexvalinput,
            flexDirection: this.dirvalue,
          });
          break;
        case "top":
          this.itemjson.push({
            middle: [],
            flex: this.flexvalinput,
            flexDirection: this.dirvalue,
          });
          break;
        case "middle":
          this.itemjson.push({
            block: [],
            flex: this.flexvalinput,
            flexDirection: this.dirvalue,
          });
          break;
        case "block":
          this.itemjson.push({
            flex: this.flexvalinput,
            flexDirection: this.dirvalue,
          });
          break;

        default:
          break;
      }
      this.showdia1 = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.icondiv {
  cursor: pointer;
}
.oprationdiv {
  display: flex;
  // flex-direction: column;
  justify-content: space-around;
  // background-color: rgb(21, 83, 119);
  // padding: 1px;
}
.divcontainer {
  display: flex;
  // flex-direction: column;
  width: 1280px;
  height: 360px;
  border: 1px solid red;
}

// .adddiv1 {
//   display: flex;
//   border: 1px solid black;
// }
.adddiv {
  display: flex;
  border: 1px solid black;

  .hang {
    border: 1px solid black;
    margin: 1px;
    background-color: #0408ff63;
  }

  .top {
    border: 1px solid black;
    margin: 1px;
    background-color: #e6ff044f;
  }
  .middle {
    border: 1px solid black;
    margin: 1px;
    background-color: #f30b8b63;
  }
  .block {
    border: 1px solid black;
    margin: 1px;
    // width: 150px;
    // height: 50px;
    background-color: #53f3f355;
  }
}
</style>
